//导入基础库，核心模块
import './index.css';
import React, { Component, useState } from 'react';
//reactDOM 处理dom用的，document object model 相当于一个标签
import ReactDOM from 'react-dom/client';


const root = ReactDOM.createRoot(
  //获取id为root的标签
  document.getElementById('root') as HTMLElement
);

//react使用jsx语法，遇到{}理解为逻辑，js运算，遇到<>标签理解为html标签
function App(){
  const [flag,setFlag]=useState(true);

  //将样式定义在一个对象中
  const obj={
    color:'#f66',
    fontSize:'58px'
  }
  return <>
  {/* 行内样式 */}
    <h1 style={{color:'#f66',fontSize:'58px'}}>组件内容</h1>
    <h2 style={obj}>我是MT</h2>
    {/* 在react中定义一个class要使用className，因为class是系统关键字 */}
    <h3 className="my-h3-style">我是MT</h3>
  </>
}




root.render(
  <App/>
);

